 <template></template>
<script type="text/ecmascript-6">
import { ImagePreview } from "vant";
export default {
  props: ["content"],
  data() {
    return {
      imgArr: [],
    };
  },
  methods: {
    getImgArr() {
      var str = document.getElementById("newscontent").innerHTML;
      //匹配图片（g表示匹配所有结果i表示区分大小写）
      var imgReg = /<img.*?(?:>|\/>)/gi;
      //匹配src属性
      var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
      var arr = str.match(imgReg);
      if (!arr) {
        return;
      }
      this.imgArr = [];
      for (var i = 0; i < arr.length; i++) {
        var src = arr[i].match(srcReg);
        //获取图片地址
        if (src[1]) {
          this.imgArr.push(src[1]);
        }
      }
    },
    clickImg() {
      var imgDom = document
        .getElementById("newscontent")
        .getElementsByTagName("img");
      var i;
      var _this = this;
      console.log(222, imgDom);
      for (i = 0; i < imgDom.length; i++) {
        (function(i) {
          var a = imgDom[i];
          a.addEventListener("click", function(e) {
            e.preventDefault();
            _this.showImg(i, _this.imgArr);
          });
        })(i);
      }
    },
    showImg(i, img) {
      let _this = this;
      ImagePreview({
        images: img,
        startPosition: i,
        closeOnPopstate: true,
        onClose() {}
      });
    }
  },

  created() {
    this.getImgArr();
    this.clickImg();
  },
  computed: {
    contentchange() {
      return this.content;
    }
  },
  watch: {
    contentchange(n, o) {
      this.getImgArr();
      this.clickImg();
    }
  }
};
</script>

 
